<template>
	<!-- 抢购列表 -->
	<!-- 精选 -->
	<div class="skl">
		<div class="skl_content">
			<div class="recommend">
				<div class="rmd_top">
					<div>为你精选</div>
					<div class="rmd_top_son" @click="changeComd">换一批</div>
				</div>
				<div class="rmd_bottom">
					<div v-for="item in siftList" :key="item.id">
						<div class="rmd_img" @click="rmdDetails(item)">
							<img :src="item.product_image_url" alt="">
						</div>
						<div class="rmd_font">￥{{item.price}}</div>
					</div>
				</div>
			</div>
			<!--  -->
			<div ref='wrapper' style="overflow: scroll;" class="comd" :style="{ height: wrapperHeight + 'px' }">
				<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false"
				 :maxDistance="0" ref="loadmore">
				<ul>
					<li class="seckill_list" v-for="item in commodityList" :key="item.id">
						<!-- <div class="rob">必抢</div> -->
						<div class="s_list_img" @click="lookDetails(item)">
							<div>
								<img :src="item.product_image_url" alt="">
							</div>
						</div>
						<div class="s_list_init">
							<div class="s_list_title van-ellipsis">
								{{item.name}}
							</div>
							<div class="s_residue">
								<div class="s_plan">
									<van-progress :percentage="item.schedule" color="#ee0a24" />
								</div>
								<div class="s_plan_txt">
									已抢{{item.schedule}}%
								</div>
							</div>
							<div class="s_price">
								<div class="s_price_init">
									<span>￥{{item.price*2}}</span><br />
									<span>￥{{item.price}}</span>
								</div>
								<div class="s_price_but">
									<van-button round size="small" type="danger" @click="lookDetails(item)">{{isFailure===0?'马上抢':'等待中'}}</van-button>
								</div>
							</div>
						</div>
					</li>
				</ul>
				</mt-loadmore>
				<div class="loading_finish" v-show="allLoaded">
				  没有更多的数据了！
				</div>
			</div>
			<loading v-show="bool"></loading>
		</div>
	</div>
</template>

<script>
	import loading from '../purchase/loading.vue';
	export default {
		data() {
			return {
				siftList: [],
				commodityList: [],
				bool: true,//加载
				pageNumBottom: 1,//页码
				allLoaded: false,//是否上拉
				h_time:0,
				wrapperHeight:0,//自适应高度
				// showlaoding:false,
			}
		},
		props: ['seckTime','isFailure'],
		watch: {
			'seckTime': function(newVal, oblVal) {
				let str = newVal.toString();
				this.h_time = str.split(":")[0];
				let params = {
					pageNum: 1, //页码
					pageSize: "10", //每页条数
					salesMode: "11", //商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					// activityTime:this.h_time,//
				};
				this.seckillList(params)
			},
		},
		mounted(){
			// 父控件要加上高度，否则会出现上拉不动的情况
			   this.wrapperHeight =
			     document.documentElement.clientHeight -
			     this.$refs.wrapper.getBoundingClientRect().top;
		},
		methods: {
			//精选商品详细
			rmdDetails(item){
				this.$router.push({
					path: "/GMCommodityDetail",
					query: {
						id: item.id,
					}
				})
			},
			//秒杀商品详细
			lookDetails(item) {
				if(!this.isFailure){
					this.$router.push({
						path: "/seckCommodityDetail",
						query: {
							id: item.id,
						}
					})
				}else{
					this.$toast('秒杀未开始！')
				}
				
				
			},
			//商品推荐
			async comdRecommend() {
				let params = {
					pageNum: this.pageNumBottom, //页码
					pageSize: "4", //每页条数
					salesMode: "7", //商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
				};
				this.bool = true;
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
					this.siftList = res.data.list;
				} else {
					this.$toast(res.msg);
				}
				this.bool = false;
			},
			//商品列表
			async seckillList(params = null) {
				if (params) {
					params = {
						pageNum: this.pageNumBottom, //页码
						pageSize: "10", //每页条数
						salesMode: "11", //商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
						// activityTime: this.seckTime, //
					};
				}
				this.bool = true;
				const res = await this.$axios.post(this.$api.shopListData, params);
				// console.log(res);
				if (res.success) {
					this.commodityList = this.scheduleInit(res.data.list);
				} else {
					this.$toast(res.msg);
					this.commodityList = [];
				}
				this.bool = false;
			},

			//换一批
			async changeComd() {
				this.pageNumBottom = this.pageNumBottom + 1
				this.comdRecommend();
			},
			//上拉刷新·
			loadTop() {
				this.loadFrist();
			},
			loadBottom() {
				this.loadMore();
			},
			// 下来刷新加载
			async loadFrist() {
				this.$store.commit('noLoadEnabled');
				this.pageNumBottom = 1;
				let params = {
					pageNum: this.pageNumBottom, //页码
					pageSize: 10, //每页条数
					salesMode: 10, //商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					// activityTime:this.seckTime,//
				};
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
					this.commodityList = this.scheduleInit(res.data.list);
					// this.commodityList = res.data.list;
					this.isHaveMore(res.data.nextPage);
					console.log(res.data.nextPage)
					console.log(this.allLoaded)
					this.$refs.loadmore.onTopLoaded();
				} else {
					this.$toast(res.msg);
				}
				this.$store.commit('yesLoadEnabled');
			},
			// 加载更多
			async loadMore() {
				this.$store.commit('noLoadEnabled');
				this.pageNumBottom += 1;
				let params = {
					pageNum: this.pageNumBottom, //页码
					pageSize: 10, //每页条数
					salesMode: 10, //商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					// activityTime:this.seckTime,//
				};
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
					
					this.commodityList = this.commodityList.concat(this.scheduleInit(res.data.list));
					this.isHaveMore(res.data.nextPage);
					
					this.$refs.loadmore.onBottomLoaded();
				} else {
					this.$toast(res.msg);
				}
				this.$store.commit('yesLoadEnabled');
			},

			isHaveMore: function(isHaveMore) {
				// 是否还有下一页，如果没有就禁止上拉刷新
				this.allLoaded = true; //true是禁止上拉加载
				if (isHaveMore) {
					this.allLoaded = false;
				}
			},
			//进度初始化
			scheduleInit(datas){
				
				datas.forEach((item)=>{
					if(!this.isFailure){
						item.schedule = Math.floor(Math.random()*100)
					}else{
						item.schedule = 0
					}
				})
				return datas;
			},
			

		},
		components: {
			loading
		},
		created() {
			this.comdRecommend();
			this.seckillList();
		}
	}
</script>

<style lang="scss" scoped>
	
	.skl{
		position: relative;
		// margin: 0 auto;
		height: 100%;
		display: flex;
		justify-content: center;
	}
	.skl_content {
		position: absolute;
		top: -20px;
		width: 96%;
		top: -55px;
	}
	
	//精选
	.recommend {
		height: 150px;
		background-color: white;
		color: rgb(236, 53, 35);
		box-sizing: border-box;
		padding: 8px 10px 8px 10px;
		border-radius: 9px;
	}

	.rmd_top {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
	}

	.rmd_top_son {
		font-size: 0.628em;
		font-weight: 100;
	}

	.rmd_bottom {
		margin-top: 17px;
		display: flex;
		justify-content: space-between;
	}

	.rmd_bottom .rmd_img {
		width: 80px;
		height: 80px;

	}

	.rmd_bottom .rmd_img img {
		width: 100%;
		height: 100%;

	}

	.rmd_bottom .rmd_font {
		font-size: 12px;
		font-weight: 700;
		text-align: center;
	}

	/* 商品列表 */
	.seckill_list {
		width: 100%;
		background-color: white;
		color: rgb(236, 53, 35);
		display: flex;
		margin-top: 10px;
		box-sizing: border-box;
		border-radius: 8px;
		padding: 7px 0px;
		position: relative;
	}

	//列表商品图
	.s_list_img {
		width: 115px;
		position: relative;
		box-sizing: border-box;
		padding: 10px;
		overflow: hidden;

		div {
			width: 90px;
			position: absolute;
			display: inline-block;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			img {
				width: 100%;
				height: 100%;

			}
		}

	}

	.s_list_init {
		vertical-align: top;
		width: 67%;
		padding-left: 14px;
		padding-right: 12px;
		box-sizing: border-box;
		color: #FF1B28;
		// margin-left: 14px;
	}

	/* 文字 */
	.s_list_title {
		color: #323233;
		font-size: 12px;
		text-align: left;
		margin: 14px 0px 6px 0px;
	}

	.s_residue {
		display: flex;
		justify-content: space-between;
		align-items: baseline;

		.s_plan {
			width: 72%;
			;
		}

		.s_plan_txt {
			color: #ccc;
			width: 52px;
			font-size: 0.6em;
		}
	}

	.van-button--small {
		min-width: 87px;
		margin-top: 7px;
		font-size: 16px;
		line-height: 30px;
	}

	.van-progress {
		border-radius: 39px;
		height: 8px;
	}

	/* 价格 */
	.s_price {
		display: flex;
		justify-content: space-between;
		margin-top: 11px;
		text-align: center;
	}

	.s_price_init {
		float: left;
	}

	.s_price_but {
		float: left;

	}

	.s_price_init>span:nth-child(1) {
		color: #A6A6A6;
		text-decoration: line-through;
		font-size: 12px;
	}

	.s_price_init>span:nth-child(3) {
		font-weight: bold;
		font-size: 16px;

	}

	/* 必抢 */
	.rob {
		position: absolute;
		height: 30px;
		width: 70px;
		font-size: 16px;
		line-height: 30px;
		color: white;
		text-align: center;
		background-image: linear-gradient(to right, #FA51BD 100%, #FF297A 100%);
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		left: 0px;
		top: 10px;
	}
	
</style>
